<template>
  <div>
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for='item in gallery' :key="item.id"><img :src="item.img_url" alt="" /></van-swipe-item>
    </van-swipe>
    <van-action-sheet v-model="show" title="加入">
      <div class="content">
        <!-- 加减的东西 -->
        <van-stepper v-model="value" theme="round" button-size="22" disable-input />
        <!-- 这个是我弹出来的购物车 -->
        <van-goods-action v-for="item in productList">
          <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
          <van-goods-action-icon icon="cart-o" text="购物车" @click="qgwc" />
          <van-goods-action-button type="warning" text="加入购物车" @click="jiaru(item.id)" />
          <van-goods-action-button type=" danger" text="立即购买" />
        </van-goods-action>
      </div>
    </van-action-sheet>





    <!-- 底部的加入购物车 -->
    <van-goods-action v-for="item in productList">
      <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-goods-action-icon icon="cart-o" text="购物车" />
      <van-goods-action-button type="warning" text="加入购物车" @click="jia" />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>

  </div>
</template>

<script>
import Vue from 'vue';
import { cpmx, xgcp } from "@/api/ppxq.js";
import { jiarugwc } from "@/api/jiarugwc.js";
import { GoodsAction, GoodsActionIcon, GoodsActionButton } from 'vant';
import { Swipe, SwipeItem } from 'vant';
import { Stepper } from 'vant';
import { ActionSheet } from 'vant';

Vue.use(ActionSheet);
Vue.use(Stepper);
Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(GoodsAction);
Vue.use(GoodsActionButton);
Vue.use(GoodsActionIcon);
export default {
  name: "",
  data() {
    return {
      gallery: [],
      productList: '',
      value: 1,
      show: false
    };
  },
  created() {
    cpmx({
      id: this.$route.query.id,
    }).then((res) => {
      console.log("详情页产品的数据", res);
      this.gallery = res.data.gallery
      this.productList = res.data.productList

      console.log('我的输出', this.productList);
    });
    xgcp({
      id: this.$route.query.id,
    }).then((res) => {
      console.log("相关产品", res);
    });
  },
  methods: {
    // 跳转到购物车
    qgwc() {
      this.$router.push('/cart')
    },
    // 打开模态框
    jia() {
      this.show = true
    },
    // 加入购物车

    jiaru(id) {
      console.log(id);
      console.log(this.$route.query.id);
      jiarugwc({ goodsId: this.$route.query.id, productId: id, number: this.value }).then(res => {


        console.log('加入购物车', res);
      })
    }
  }
};
</script>
<style lang="less" scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}

.content {
  padding: 16px 16px 160px;
}
</style>